<template>
	<view>
		<!-- 金豆记录 -->
		<view class="" style="background-color: #fff;margin: 20rpx;padding: 20rpx;border-radius: 14rpx;">我的余额：
			<text
				style="color: #ff5500;font-weight: 600;margin-right: 10rpx;">{{vk.vuex.get('$user.userInfo.balance')}}</text>金豆
		</view>

		<view v-if="List.length==0">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无记录">
			</u-empty>
		</view>

		<view v-else class="recharge_box" v-for="(item,index) in List" :key="index">
			<view v-if="item.type=='income'" style="display: flex;align-items: center;justify-content: space-between;">
				<view>
					<view style="font-size: 32rpx;margin-bottom: 20rpx;">{{item.change_reason}}</view>
					<view style="color: #888;font-size: 26rpx;">
						{{$u.timeFormat(item._add_time, 'yyyy/mm/dd hh:MM')}}
					</view>
				</view>

				<text style="color: #ff5500;font-size: 32rpx;">+{{item.change_num}}</text>
			</view>
			<view v-if="item.type=='expend'" style="display: flex;align-items: center;justify-content: space-between;">
				<view>
					<view style="font-size: 32rpx;margin-bottom: 20rpx;">{{item.change_reason}}</view>
					<view style="color: #888;font-size: 26rpx;">
						{{$u.timeFormat(item._add_time, 'yyyy/mm/dd hh:MM')}}
					</view>
				</view>

				<text style="color: #6b6b6b;font-size: 32rpx;">-{{item.change_num}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				page: 1,
				List: [],
			}
		},
		async onShow() {
			this.List = [];
			vk.showLoading('加载中...');
			const rechargeList = await db.collection("a_jindou_detail").where({
				user_id: vk.vuex.get('$user.userInfo._id'),
			}).orderBy('_add_time', 'desc').limit(10).get()
			this.List = rechargeList.result.data
			vk.hideLoading();
		},

		async onReachBottom() {
			const moreList = await db.collection("a_jindou_detail").where({
				user_id: vk.vuex.get('$user.userInfo._id')
			}).orderBy('_add_time', 'desc').skip(this.page * 10).limit(10).get()
			console.log(moreList);

			this.List = this.List.concat(moreList.result.data)
			this.page = this.page + 1
		},

		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
	}

	.recharge_box {
		margin: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 14rpx;
	}
</style>
